<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数传递</title>
</head>
<body>


<div id="app">
    <Aoo></Aoo>
    <h1>number:{{number}}</h1>
<!--    使用组件-->
    <Student  :msg="msg"  :change="change"></Student>
</div>


<script src="../vue.js"></script>
<script>

    const  Aoo = {
        template: '<h1>Aoo组件</h1>'
    }
    //定义组件
    const  Student = {
        template:`
               <div>
                   <h1>Student 组件  {{msg}}</h1>
                   <button @click="toVm">传递number值到父组件</button>
                   <Aoo></Aoo>
               </div>
        `,
        components: {
             Aoo
        },
        data(){
            return{
                number:50
            }
        },
        methods:{
            toVm(){
                this.change(this.number)  //   访问父组件中的函数
            }
    },
        props:["msg","change"]
    }

    const vm = new Vue({
        el:'#app',
        data:{
            msg:'hello java2219',
            number:30
        },
        methods:{
            change(val){
                this.number = val
            }
        },
        components: {
            Student ,Aoo//  注册组件
        }
    })
</script>

</body>
</html>